<template>
	<div class="map-all">
		<right-nav :parentName='"图库"' :childName='"归档图库"'></right-nav>
		<div class="right-box">
			<el-form :model='searchInfo' ref='psdInfo' label-width='120px'>
				<el-row>
					<el-col>
						<el-form-item label='关键字：' size='small'>
							<el-col :span='13'>
								<el-input v-model='searchInfo.keywords'></el-input>
							</el-col>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label='出单次数：' size='small'>
							<el-col :span='6'>
								<el-input v-model='searchInfo.numMin'></el-input>
							</el-col>
							<el-col :span='1' class='text-center'>~</el-col>
							<el-col :span='6'>
								<el-input v-model='searchInfo.numMax'></el-input>
							</el-col>
						</el-form-item>
					</el-col>
					
					<el-col>
						<el-form-item label='归档时间：' size='small'>
							<el-col :span='13'>
							    <el-date-picker v-model="placeTime"
							      	type="daterange"
							      	range-separator="至"
							      	start-placeholder="开始日期"
							      	end-placeholder="结束日期"
							      	style='width: 100%;'>
							    </el-date-picker>
							</el-col>
						</el-form-item>
					</el-col>
					
					<el-col>
						<el-form-item label='归档更新时间：' size='small'>
							<el-col :span='13'>
							    <el-date-picker v-model="placeTime_update"
							      	type="daterange"
							      	range-separator="至"
							      	start-placeholder="开始日期"
							      	end-placeholder="结束日期"
							      	style='width: 100%;'>
							    </el-date-picker>
							</el-col>
							<el-col :span='10' class='ml10'>
								<el-button size='small' type="primary">搜索</el-button>
								<el-button size='small' type="primary">高级搜索</el-button>
								<el-button size='small' type="primary">重置</el-button>
							</el-col>
						</el-form-item>
					</el-col>
					
					<el-col>
						<el-form-item label='图片格式：' size='small'>
							<ul class="lett">
								<li class="mr20" @click="clickHandle('imgType','all')">
									<a class="item-a" :class="{'active': searchInfo.imgType == 'all'}">全部</a>
								</li>
								<li class="mr20" @click="clickHandle('imgType','png')">
									<a class="item-a" :class="{'active': searchInfo.imgType == 'png'}">PNG</a>
								</li>
								<li class="mr20" @click="clickHandle('imgType','jpg')">
									<a class="item-a" :class="{'active': searchInfo.imgType == 'jpg'}">JPG/JPEG</a>
								</li>
								<li class="mr20" @click="clickHandle('imgType','vector')">
									<a class="item-a" :class="{'active': searchInfo.imgType == 'vector'}">矢量图</a>
								</li>
							</ul>
						</el-form-item>
					</el-col>
					
					<el-col>
						<el-form-item label='排序方式：' size='small'>
							<ul class="lett">
								<li class="mr20" @click="clickHandle('sortType','creatTime')">
									<a class="item-a" :class="{'active': searchInfo.sortType == 'creatTime'}">按创建时间</a>
								</li>
								<li class="mr20" @click="clickHandle('sortType','refreshTime')">
									<a class="item-a" :class="{'active': searchInfo.sortType == 'refreshTime'}">按更新时间</a>
								</li>
								<li class="mr20" @click="clickHandle('sortType','fileSize')">
									<a class="item-a" :class="{'active': searchInfo.sortType == 'fileSize'}">按文件大小</a>
								</li>
							</ul>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="right-box mt20">
			<div class="">
				<el-button size='small' type="primary">按创建时间</el-button>
				<el-button size='small' type="primary">按更新时间</el-button>
				<el-button size='small' type="primary">按文件大小</el-button>
				<div class="float-r">
					<a class="f16">
						回收站
						<i class="el-icon-delete"></i>
					</a>
					<el-button size='small' type="primary" class='ml20'>上传图片</el-button>
				</div>
			</div>
		</div>

		<div class="mt20">
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="35"></el-table-column>
				<el-table-column prop="imgNo" label="图片编号" width="85"></el-table-column>
				<el-table-column prop="imgUrl" label="图片">
					<template slot-scope="scope">
						<div class="table-img text-center">
							<img src="../../../assets/img/logo.png" />
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="imgName" label="图片名称" width="80"></el-table-column>
				<el-table-column prop="imgClass" label="图片分类" width="80"></el-table-column>
				<el-table-column prop="imgSort" label="图片归档" width="80"></el-table-column>
				<el-table-column prop="imgNum" label="图片出单数" width="100"></el-table-column>
				<el-table-column prop="shopNameNum" label="店铺别名数" width="100"></el-table-column>
				<el-table-column prop="imgPars" label="图片规格" width="120">
					<template slot-scope="scope">
						<div class="">
							<p>尺寸：<span>{{scope.row.imgPars.size}}</span></p>
							<p>格式：<span>{{scope.row.imgPars.type}}</span></p>
							<p>大小：<span>{{scope.row.imgPars.fileSize}}</span></p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="时间" width="135">
					<template slot-scope="scope">
						<div class="">
							<p>创建：<span>{{scope.row.time.creatTime}}</span></p>
							<p>更新：<span>{{scope.row.time.updateTime}}</span></p>
						</div>
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="90">
					<template slot-scope="scope">
						<el-button type="text" size="small">编辑</el-button>
						<el-button type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pagina-box text-right pt10 pb10">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import RightNav from '@/components/right-nav'
	export default {
		components: {
			RightNav
		},
		data() {
			return {
				searchInfo: {
					imgType: 'all',
					numMin: '',
					numMax: '',
					keywords: '',
					sortType: 'creatTime',
					placeTime: '', // -归档时间
					placeTime_update: '', // -归档更新时间
				},
				tableData: [{
					imgNo: 'KT9527G',
					imgUrl: '',
					imgName: 'YJB中文',
					imgClass: '分类',
					imgSort: '归档',
					imgNum: '出单数',
					shopNameNum: '12',
					imgPars: {
						size: '123x456',
						type: 'jpg',
						fileSize: '123M',
					},
					time: {
						creatTime: '2011-11-11',
						updateTime: '2012-11-11',
					},
				}, {
					imgNo: 'KT9527G',
					imgUrl: '',
					imgName: 'YJB中文',
					imgClass: '分类',
					imgSort: '归档',
					imgNum: '出单数',
					shopNameNum: '12',
					imgPars: {
						size: '123x456',
						type: 'jpg',
						fileSize: '123M',
					},
					time: {
						creatTime: '2011-11-11',
						updateTime: '2012-11-11',
					},
				}, {
					imgNo: 'KT9527G',
					imgUrl: '',
					imgName: 'YJB中文',
					imgClass: '分类',
					imgSort: '归档',
					imgNum: '出单数',
					shopNameNum: '12',
					imgPars: {
						size: '123x456',
						type: 'jpg',
						fileSize: '123M',
					},
					time: {
						creatTime: '2011-11-11',
						updateTime: '2012-11-11',
					},
				}],
				multipleTable: [],
				currentPage1: 1,
			}
		},
		methods: {
			clickHandle: function(type, value) {
				this.searchInfo[type] = value;
				this.search();
			},
			search: function() {

			},
			handleSelectionChange: function() {

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		},
		created() {
			this.$bus.emit('menuEvent', '1')
			this.$bus.emit('activeEvent', 'mapPlace')
		},
	}
</script>

<style scoped="scoped" lang="less">
	.map-all {
		.pagina-box {
			/*分页盒子样式*/
			border: 1px solid rgb(221, 221, 221);
			border-top: none;
		}
		.right-box {
			padding: 18px;
			border: 1px solid rgb(221, 221, 221);
			.item-a {
				padding: 4px;
				&:hover {
					border-radius: 4px;
					background-color: #3A8DE4;
					color: #fff;
				}
			}
			.active {
				border-radius: 4px;
				background-color: #3A8DE4;
				color: #fff;
			}
		}
		.table-img {
			width: 160px;
			height: 100px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>